@import (reference) 'config';

.qr-wrapper {
  transition: all .3s;
  height: auto;
  position: relative;
  min-height: 240px;

  .center {
    height: auto;
  }

  w-qr-code {
    display: block;
    margin: @qr-margin;
    text-align: center;
    width: 200px;
    height: 200px;
    overflow: hidden;
    transition: all .3s;
    box-shadow: 0 0 0 5px #FFF;
    border-radius: 1px;

    .qr-code-wrap,
    img {
      width: 200px;
      height: 200px;
      transition: all .3s;
      cursor: pointer;
    }
  }

  &.zoomed-in {
    w-qr-code {
      width: 400px;
      height: 400px;

      .qr-code-wrap,
      img {
        width: 400px;
        height: 400px;
      }
    }
  }
}

@media screen and (max-width: 600px) {
  .qr-wrapper {
    &.zoomed-in {
      w-qr-code {
        width: 340px;
        height: 340px;

        .qr-code-wrap,
        img {
          width: 340px;
          height: 340px;
        }
      }
    }
  }
}